<template>
  <div class="editor content">
    <mavon-editor
      ref="md"
      v-model="formdata.text"
      @save="dialog = true"
      @imgAdd="$imgAdd"
      class="editor content"
    />
    <v-dialog v-model="dialog" persistent max-width="600px">
      <v-card>
        <v-alert dense outlined type="error" v-show="isDown">
          <strong>文本,标题,描述和封面图都不能为空</strong>
        </v-alert>
        <v-card-title>
          <span class="text-h5">填写详情</span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-row>
              <v-col cols="6" sm="6" md="6">
                <v-text-field
                  label="标题"
                  required
                  v-model="formdata.title"
                  prepend-icon="mdi-map-marker"
                ></v-text-field>
              </v-col>

              <v-col cols="6" sm="6" md="6">
                <v-file-input
                  accept="image/*"
                  label="封面"
                  v-model="formdata.coverImg"
                  prepend-icon="mdi-map-marker"
                  @change="getImageUrl"
                ></v-file-input>
              </v-col>
              <v-col cols="12" sm="6" md="6">
                <v-select
                  :items="items"
                  prepend-icon="mdi-map-marker"
                  item-text="name"
                  item-value="id"
                  label="类型"
                  v-model="formdata.typeId"
                ></v-select>
              </v-col>
              <v-col cols="12">
                <v-textarea
                  label="描述"
                  v-model="formdata.desc"
                  prepend-icon="mdi-map-marker"
                ></v-textarea>
              </v-col>
              <v-col cols="12" v-show="false">
                <v-text-field v-model="formdata.coverUrl"></v-text-field>
              </v-col>
            </v-row>
          </v-container>
          <small>自定义封面详情</small>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" text @click="dialog = false">
            关闭
          </v-btn>
          <v-btn
            color="blue darken-1"
            :loading="loading"
            :disabled="loading"
            text
            @click="saveWork()"
          >
            保存
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import api from "../../axios/api";
export default {
  data() {
    return {
      dialog: false,
      coverImg: null,
      isDown: false,
      loading: false,
      loader: null,
      items: ["加载中..."],
      formdata: {
        text: "欢迎使用markdown编辑器",
        desc: "",
        title: "",
        coverUrl: "",
        typeId: "",
      },
    };
  },
  methods: {
    getWorkById() {
      if(this.$route.params.id == -1){
        return;
      }
      let data = { workId: this.$route.params.id }; 
      api
        .getByWorkId(data)
        .then((res) => {
          this.formdata = res.data.data;
        })
        .catch((e) => {
          console.error(e);
        });
    },
    getValue() {
      this.dialog = false;
    },
    saveWork() {
      this.loading = true;
      this.isDown = false;
      console.log(this.formdata);
      if (this.$route.params.id == -1) {
        //执行新建文档
        if (
          this.formdata.text != "" &&
          this.formdata.desc != "" &&
          this.formdata.title != "" &&
          this.formdata.typeId != "" &&
          this.formdata.coverUrl != ""
        ) {
          api
            .saveWork(this.formdata)
            .then(() => {
              this.loading = false;
              alert("保存成功");
            })
            .catch((e) => {
              this.isDown = true;
              this.loading = false;
              console.error(e);
              alert("保存异常");
            })
            .finally(() => {
              this.formdata.value = "";
              this.formdata.desc = "";
              this.formdata.title = "";
              this.formdata.coverUrl = "";
              this.formdata.coverImg = null;
              this.formdata.typeId = "";
            });
        } else {
          this.loading = false;
          this.isDown = true;
        }
      } else {
        if (
          this.formdata.text != "" &&
          this.formdata.desc != "" &&
          this.formdata.title != "" &&
          this.formdata.typeId != "" &&
          this.formdata.coverUrl != ""
        ) {
          this.formdata.id = this.$route.params.id;
          api
            .updateWorkById(this.formdata)
            .then(() => {
              this.loading = false;
              alert("保存成功");
            })
            .catch((e) => {
              console.error(e);
            });
        } else {
          this.loading = false;
          this.isDown = true;
        }
      }
    },
    getImageUrl(File) {
      this.loading = true;
      if (File) {
        let formdata = new FormData();
        formdata.append("image", File);
        api
          .saveCover(formdata)
          .then((res) => {
            this.formdata.coverUrl = res.bash;
            this.loading = false;
          })
          .catch((err) => {
            this.loading = false;
            console.error(err);
            alert("封面上传异常");
          });
      } else {
        this.formdata.coverUrl = "";
      }
    },
    // 绑定@imgAdd event
    $imgAdd(pos, $file) {
      // 第一步.将图片上传到服务器.
      console.log($file);
      let formdata = new FormData();
      formdata.append("image", $file);

      api
        .saveImg(formdata)
        .then((res) => {
          this.$refs.md.$img2Url(pos, res.bash);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getWorkClass() {
      api
        .getAllWorkClass()
        .then((res) => {
          this.items = res.data.datas;
        })
        .catch((e) => {
          console.error(e);
        });
    },
  },
  watch: {},
  mounted() {
    if (this.$route.params.id !== -1) {
      this.getWorkById();
    }
    this.getWorkClass();
  },
};
</script>

<style scoped>
.editor {
  height: 100%;
}
.v-note-wrapper {
  z-index: 0;
}
</style>